<template>
  <div class="view">
    <div class="row">
      数据字典：
      <dict-select dict-key="data_status"
                   v-model="dictValue"
                   style="margin-right: 20px;"
                   @change="dictChange"></dict-select>
      <dict-radio dict-key="data_status" v-model="dictValue"></dict-radio>
    </div>
    <div class="row">
      权限管控按钮：<auth-btn btn-id="test" type="primary">测试按钮</auth-btn>
      <span>用户添加权限：{{$route.path}}{test} 后可见</span><br>
      permission指令权限控制：<el-link type="danger" v-permission="'test'">dom权限控制</el-link> <span>用户添加权限：{{$route.path}}{test} 后可见</span>
    </div>
    
    <div class="row">
      文件上传及显示：<document-upload v-model="fileId"></document-upload>
    </div>
  
  </div>
</template>

<script>
import DictSelect from '@/components/DictSelect'
import DictRadio from '@/components/DictRadio'
import AuthBtn from '@/components/AuthBtn'
import DocumentUpload from "@/components/DocumentUpload/index";
import permission from '@/directive/permission/index.js' // 权限判断指令

export default {
  name: "ComponentsDemo",
  components: {
    DictSelect,
    DictRadio,
    AuthBtn,
    DocumentUpload,
  },
  directives: {
    permission
  },
  data(){
    return {
      dictValue: "0",
      fileId: '',
    }
  },
  methods: {
    dictChange(val){
      console.log('数据字典选项变更：', val)
      console.log('$ins=== ', this.$route.path)
    }
  }
}
</script>

<style scoped lang="scss">
  .row{
    padding: 10px;
    margin-bottom: 10px;
    line-height: 36px;
  }
</style>